<template>
  <div>
    <el-table :data="userList" stripe>
      <el-table-column prop="username" label="账号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalSize"></el-pagination>
  </div>
</template>

<script>
import user from "@/api/system/user";

export default {
  name: "user",
  data() {
    return {
      userList: [
        {
          username: '123',
          sex: '1',
          birthday: '2021-04-10 22:59:30',
        }
      ],
      pageSizes: [10, 15, 20],
      pageSize: 10,
      totalSize: 10,
      currentPage: 1,
    }
  },
  mounted() {
    user.queryList(this.currentPage, this.pageSize, {}, ret => {
      console.log("ret", ret)
      debugger
      this.userList = ret.data.records;
      this.totalSize = ret.data.total;
    }, err => {
      console.error(err);
    })
  },
  methods: {
    handleClick(row) {
      console.log("row", row)
      alert(row.username)
    },
    handleSizeChange(a, b) {
      console.log(a)
      console.log(b)
    },
    handleCurrentChange(a, b) {
      console.log(a)
      console.log(b)
    },
  }
}
</script>

<style scoped>

</style>